<!--
 * @页面名称:
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="card list_setting">
    <a-list item-layout="vertical" size="large" :data-source="listData">
      <template #footer>
        <div>
          <b>ant design vue</b>
          footer part
        </div>
      </template>
      <template #renderItem="{ item, index }">
        <a-list-item key="item.title">
          <template #actions>
            <span v-for="{ icon, text, type } in actions" :key="icon">
              <component v-if="index % 2 === 0 && type === 'Filled'" :is="StarFilled" style="margin-right: 8px" />
              <component v-else :is="icon" style="margin-right: 8px" />
              {{ text }}
            </span>
          </template>
          <template #extra>
            <img width="272" alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png" />
          </template>
          <a-list-item-meta :description="item.description">
            <template #title>
              <a :href="item.href">{{ item.title }}</a>
            </template>
            <template #avatar>
              <Avatar></Avatar>
            </template>
          </a-list-item-meta>
          {{ item.content }}
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script setup lang="ts">
import { StarOutlined, StarFilled, LikeOutlined, MessageOutlined } from "@ant-design/icons-vue";
import Avatar from "./components/avatar.vue";
const listData: Record<string, string>[] = [];
for (let i = 0; i < 5; i++) {
  listData.push({
    href: "",
    title: `ant design vue part ${i}`,
    avatar: "https://joeschmoe.io/api/v1/random",
    description: "Ant Design, a design language for background applications, is refined by Ant UED Team.",
    content:
      "We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently."
  });
}
const actions: Record<string, any>[] = [
  { icon: StarOutlined, text: "156", type: "Filled" },
  { icon: LikeOutlined, text: "156" },
  { icon: MessageOutlined, text: "2" }
];
</script>

<style scoped lang="scss">
.list_setting {
  height: 100%;
  .ant-list-item-meta {
    align-items: center;
    .ant-list-item-meta-title {
      a {
        &:hover {
          color: var(--el-color-primary);
        }
      }
    }
  }
}
</style>
